@charset "utf-8";
@import"common";



    .imgWrap{
        width: 100%;
    }
    

body{
    background-color:#FBFAF7 ;
}
body section .eng{
    background:url(/images/index/engbc.png) no-repeat right 137px;
    padding-bottom: 146px;
    .title-box{
        padding-top: 104px;
        padding-bottom: 77px;

        h2{
            font-size: 47.75px;
            line-height: 53px;
            color:  $mainColor;
            font-weight: bold;
        }
        p{
            padding-top: 33px;
            font-size: 30.22px;
            line-height: 30px;
            color: $fontColor;
        }
    }

    .article-box{
        margin-left: 16px;
        ul>li{   
            padding-bottom:41px ;
            .des-box{
                display: flex;
                padding-right: 45px;
                .left{
                  
                    width: 64px;
                    height: 64px;
                    line-height: 64px;
                    text-align: center;
                    background-color: $mainColor;
                    img{

                        transition: all .5s;
                    }
                    
                    &:hover img  {
                        transform: rotate(360deg);
                    }
                }
                .right-article{
                     padding-left:10px;
                    width: calc( 100% - 64px);
                    p{
                        &:nth-of-type(1){
                            font-size: 19.24px;
                            color:#333333;
                            line-height: 20px;
                            padding-bottom: 15px;
                        }
                        &:nth-of-type(2){
                            font-size: 14px;
                            line-height: 25px;
                            color: $fontColor;
                        }
                    }
                }
            }
        }
    }
}

body section  .adv{
    background-color: white;
    padding-top: 114px;
    padding-bottom: 105px;
    
    .adv-box{
        background: url(/images/index/advbc.png) no-repeat left 75px;
        .adv-right{
            .des-box{
                h2{
                    font-size: 47.75px;
                    line-height: 53px;
                    color:#8fc31f ;
                    font-weight: bold;
                    padding-bottom: 41.375px;
                }
                ul li {
                    display: flex;
                    padding-bottom: 16px;      
                    .left{
                        width: 54px;
                        height: 54px;
                        line-height: 54px;
                        background-color:#8fc31f ;
                        border-radius: 27px;
                        text-align: center;
                    }
                    .right-article{
                        padding-left: 10px;
                        line-height: 54px;
                        font-size: 14px;
                        color: $fontColor;
                    }
                }
            }

        }
    }
}

body section .family{
    background-color: $mainColor;
    padding-bottom: 146px;
    .container{
        h2{
            text-align: center;
            font-size: 48px;
            line-height: 48px;
            color: white;
            font-weight: bold;
            padding:110px 0px 0px 0px;
        }
        ul{
            padding-left: 58px;
            li{
                .family-box{
                    display: flex;
                     padding-top:72px ;
                   .family-left{
                      padding-top: 7px;
                   }
                   .family-right{
                        padding-left: 60px;
                        padding-right:50px;
                        height:120px ;
                        overflow: hidden;          /* 1.超出部分隐藏*/
                        text-overflow: ellipsis;        /*文本超出显示省略号*/
                        display: -webkit-box;      /*设置元素为弹性盒子*/
                        -webkit-line-clamp: 3;      /*设置省略号所载行数*/
                        -webkit-box-orient: vertical;  /*设置排版方向*/
                        p{
                            &:nth-of-type(1){
                                font-size: 32.89px;
                                line-height: 32.89px;
                                color: white;
                                margin-bottom: 10px;
                            }
                            &:nth-of-type(2){
                                font-size: 14px;
                                line-height: 28px;
                                color: white;
                            }
                        }
                   }
                }
                &:nth-of-type(2n){
                    .family-box{
                        padding-left: 47px;
                        .family-right{
                            padding-right: 3px;
                         }
                    }
                }
                &:nth-of-type(4){
                    .family-box{
                        padding-left: 37px;
                        .family-right{
                            padding-right: 3px;
                         }
                    }
                }
            }
        }
    }
}

body section .game{
    padding-bottom: 19px;
    .container .row{
        h3{font-size: 34.65px;
            line-height: 34.65px;
            padding: 86px 0px 45px 0px;
            font-weight: bold;
            color: #2A2A2A;
            position: relative;
            &::after{
                content: "更多";
                font-size: 12px;
                display: block;
                position: absolute;
                width: 29px;
                height: 14px;
                top: 83px;
                right: 10px;
                color: #2A2A2A;
            }
        }
        
       
    }
    .container .row .game-box .right .row{
        ul li{
            height: 108px ;
            margin-bottom: 13px;
        }
    }
    .container .game-box{
        display: flex;
        .left{
            width:37% ;
        }
        .right{
            width: 63%;
            padding-left: 32px;
            // white-space: wrap; 
            ul{
              li{
                  .artice{
                      text-align: center;
                      font-size: 14px;
                      line-height: 18px;
                  }
              }
            }
        }
    }
}


body section .partner{
    padding-top: 40px;
    padding-bottom: 68px;
    background-color: #f4f4f4;
    .container{
        h3{
            font-size: 30px;
            color: #2A2A2A;
            line-height: 30px;
            position: relative;
            &::after{
                content:"(排序不分先后)";
                font-size: 12px;
                display: block;
                position: absolute;
                width: 80px;
                line-height: 12px;
                height: 12px;
                transform: scale(0.93);
                transform-origin:left ;
                bottom: 3px;
                left: 120px;
                color: #777777;
            }
        }
        .partner-box{
            ul {
                margin-left: -30px;
                margin-right: -30px;
                padding-top: 8px;
                li{
                    padding-top: 28px;
                }
            }
        }
    }
}


@media(min-width:768px) and (max-width:992px){
    body section .eng{
        background:url(/images/index/engbc.png) no-repeat right center;
    }

    
    body section .eng .title-box{
        margin-left: 15px;
    }
    body section .family .container ul li .family-box .family-right{
        padding-left: 30px;
        padding-right:30px;
    }
    body section .game .container .game-box .left{
        text-align: center;
        width: 100%;
    }
    body section .game .container .game-box .right{
        ul{
            padding-top: 50px;
        }
        width: 100%;
    }
    body section .game .container .game-box{
        display: block;
    }

    

    footer .container .row .foot-left .top ul li div{
        text-align: center;
    }
    footer .container .row .foot-left .bottom { 
        padding-top: 35px;
       }
    
}


@media(max-width:768px){
    
    body section .eng{
        background:url(/images/index/engbc.png) no-repeat right center/30%,30%;
    }
    body section .adv .adv-box .adv-lef{
        padding: 0px;
 
    }
    body section .eng .title-box{
        margin-left: 15px;
    }

    body section  .adv .adv-box{
        background: url(/images/index/advbc.png) no-repeat right center;
    }

    body section .family .container ul li {
        padding-left: 0px;
        .family-box{
            padding-left: 10px !important;
            .family-right{
                padding-left: 15px;
                padding-right: 15px;
                
            }
        }
    }

    body section .eng .title-box {
        h2,p{

            text-align: center;
        }
    }
    body section .game .container .game-box .left{
        text-align: center;
        width: 100%;
    }
    body section .game .container .game-box .right{
        ul{
            padding-top: 50px;
        }
        width: 100%;
    }
    body section .game .container .game-box{
        display: block;
    }

    body section .game .container .row h3{
        padding-left: 30px;
    }
    body section .partner{
        padding-left: 30px;
    }

    footer .container .row .foot-left{
        padding-left: 50px;
    }
    footer .container .row .foot-right ul{
        padding-top: 20px;
    }
    
    footer .container .row .foot-left .top ul li {
        text-align: center;
    }
    footer .container .row .foot-left .bottom { 
     padding-top: 35px;
    }
    body section .eng .article-box ul > li .des-box{
        padding-left: 50px;
    }

    body section .adv .adv-box .adv-right .des-box h2{
        text-align: center;
    }

    body section .adv .adv-box .adv-right .des-box ul li{
        padding-left: 50px;
    }
 

    
        
}


@media(max-width:700px){
    body section .eng{
        background:url(/images/index/engbc.png) no-repeat right center/0%, 0%;
    }
    body section .eng .title-box{
        margin-left: 15px;
    }
    body section  .adv .adv-box{
        background: url(/images/index/advbc.png) no-repeat right center/40%, 40%;
    }

    body section .eng .article-box ul > li .des-box{
        margin: 0 auto;
        padding-right: 0px;
    }

    body section .adv .adv-box .adv-right .des-box {
        h2,p{
            text-align: center;
        }
    }
  
}


